import { Table } from 'antd';
import React from 'react';

// 本次调整预警简报
export default function WarningBriefing({ data, loading, warnFlag }) {
  const columns = [
    {
      title: '预警状态',
      key: 'status',
      dataIndex: 'status',
      width: 65,
      align: 'center',
      render: text => {
        const typeObj = {
          success: {
            text: '√',
            className: 'success-type',
          },
          warning: {
            text: '!',
            className: 'warning-type',
          },
          null: {
            text: '',
            className: 'null',
          },
        };
        return <div className={typeObj[text]?.className}>{typeObj[text].text}</div>;
      },
    },
    {
      title: '预警类型',
      key: 'type',
      dataIndex: 'type',
      width: 330,
      render: (text, row) => {
        if (row?.contrastType) {
          const arr = text.split(row.contrastType);
          return (
            <div>
              <span>{arr[0]}</span>
              <span style={{ color: 'red' }}>{row.contrastType}</span>
              <span>{arr[1]}</span>
            </div>
          );
        }
        return text;
      },
    },
    {
      title: '详细说明',
      key: 'content',
      dataIndex: 'content',
      render: (text, row, index) => {
        let node = text !== '' ? text : '-';
        if (data.length > 4 && index === 0) {
          const textList = text?.split('<br>');
          node = textList?.map((item, idx) => {
            if (item !== '') return <div key={idx}>{`${idx + 1}、${item}`}</div>;
            return null;
          });
        }
        return node;
      },
    },
  ];

  if (warnFlag) {
    return (
      <div>
        <div className="sub-title">本次调整预警简报</div>
        <Table
          rowKey="id"
          columns={columns}
          dataSource={data}
          bordered
          pagination={false}
          size="middle"
          loading={loading || false}
        />
      </div>
    );
  }
  return null;
}
